import { Image, Text, View, WebView } from '@tarojs/components'
import { useEffect } from 'react'
import CustomHeader from 'src/components/CustomHeader/CustomHeader'
import styles from './aboutUs.module.less'
import aboutUsStore from './AboutUsStore'

const AboutUs = () => {
    const { companyInfo, loading, error } = aboutUsStore

    useEffect(() => {
        aboutUsStore.getInfo();
    }, []);

    return (
        <View className={styles.aboutUs}>
            <CustomHeader showBack title='关于我们' />
            <View className={styles.content}>
                {loading ? (
                    <View className={styles.emptyState}>加载中...</View>
                ) : error ? (
                    <View className={styles.emptyState}>{error}</View>
                ) : companyInfo ? (
                    <>
                        <View className={styles.logo}>
                            <Image className={styles.logoImage} src={companyInfo.logo} mode='aspectFit' />
                            <View className={styles.companyName}>{companyInfo.name}</View>
                            <View className={styles.version}>{companyInfo.version}</View>
                        </View>

                        <View className={styles.section}>
                            <View className={styles.sectionTitle}>公司简介</View>
                            <View className={styles.sectionContent}>{companyInfo.description}</View>
                        </View>

                        <View className={styles.section}>
                            <View className={styles.sectionTitle}>我们的使命</View>
                            <View className={styles.sectionContent}>{companyInfo.mission}</View>
                        </View>

                        <View className={styles.section}>
                            <View className={styles.sectionTitle}>我们的愿景</View>
                            <View className={styles.sectionContent}>{companyInfo.vision}</View>
                        </View>

                        <View className={styles.section}>
                            <View className={styles.sectionTitle}>联系我们</View>
                            <View className={styles.contactInfo}>
                                <View className={styles.contactItem}>
                                    <Text className={styles.label}>地址：</Text>
                                    <Text className={styles.value}>{companyInfo.contact.address}</Text>
                                </View>
                                <View className={styles.contactItem}>
                                    <Text className={styles.label}>客服电话：</Text>
                                    <Text className={styles.value}>{companyInfo.contact.phone}</Text>
                                </View>
                                <View className={styles.contactItem}>
                                    <Text className={styles.label}>邮箱：</Text>
                                    <Text className={styles.value}>{companyInfo.contact.email}</Text>
                                </View>
                                <View className={styles.contactItem}>
                                    <Text className={styles.label}>官网：</Text>
                                    <Text className={styles.value}>{companyInfo.contact.website}</Text>
                                </View>
                            </View>
                        </View>
                    </>
                ) : null}
            </View>

            <View className={styles.copyright}>
                Copyright © 2024 {companyInfo?.name || '三基设计'} All Rights Reserved.
            </View>
        </View>
    )
}

export default AboutUs